<template>
  <div>
    <!-- 搜索容器 -->
    <div class="search-container">
      <span class="search-label">公司：</span>
      <el-input v-model="input" placeholder="搜索公司" class="search-input"></el-input>
       <span class="search-label">职位：</span>
      <el-input v-model="input" placeholder="搜索职位" class="search-input"></el-input>
      <span class="search-label">时间范围：</span>

      <el-button type="primary" class="search-button">查询</el-button>
      <el-button type="success" class="search-button">重置</el-button>

    </div>

    <el-table 
      :data="tableData" 
      border 
      style="width: 100%; margin-top: 15px;" 
      :header-cell-style="{ textAlign: 'center', background: '#f5f7fa', fontWeight: 'bold' }"
      :cell-style="{ textAlign: 'center' }">
      
      <!-- 第一列：公司名称 -->
      <el-table-column prop="company" label="公司名称" width="150"></el-table-column>
      
      <!-- 第二列：HR姓名 -->
      <el-table-column prop="hrName" label="HR姓名" width="120"></el-table-column>
      
      <!-- 第三列：职位名称 -->
      <el-table-column prop="position" label="职位名称" width="150"></el-table-column>
      
      <!-- 第四列：职位简介 -->
      <el-table-column prop="description" label="职位简介" width="200" :show-overflow-tooltip="true"></el-table-column>
      
      <!-- 第五列：技能要求 -->
      <el-table-column prop="skills" label="技能要求" width="200" :show-overflow-tooltip="true"></el-table-column>
      
      <!-- 第六列：薪资 -->
      <el-table-column prop="salary" label="薪资" width="120"></el-table-column>
      
      <!-- 第七列：福利待遇 -->
      <el-table-column prop="benefits" label="福利待遇" width="200" :show-overflow-tooltip="true"></el-table-column>
      
      <!-- 第八列：工作职责 -->
      <el-table-column prop="responsibilities" label="工作职责" width="250" :show-overflow-tooltip="true"></el-table-column>
      
      <!-- 第九列：发布时间 -->
      <el-table-column prop="publishTime" label="发布时间" width="150"></el-table-column>
      
      <!-- 第十列：状态（固定在右侧） -->
      <el-table-column prop="status" label="状态" width="120" fixed="right">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

     <!-- 分页组件：左对齐并距离表格10px -->
    <el-pagination class="pagination-left" background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    getStatusType(status) {
      const statusMap = {
        '招聘中': 'success',
        '已暂停': 'warning',
        '已结束': 'info',
        '热门': 'danger'
      }
      return statusMap[status] || 'info'
    }
  },
  data() {
    return {
      input: '',
      tableData: [
        {
          company: '腾讯科技',
          hrName: '张经理',
          position: '高级前端工程师',
          description: '负责微信生态相关产品的前端开发工作',
          skills: 'Vue/React, TypeScript, Webpack',
          salary: '30-50K·15薪',
          benefits: '六险一金, 带薪年假, 年度体检, 免费三餐',
          responsibilities: '1. 负责核心产品前端开发\n2. 参与技术方案设计\n3. 性能优化',
          publishTime: '2023-05-15',
          status: '招聘中'
        },
        {
          company: '阿里巴巴',
          hrName: '李主管',
          position: 'Java开发专家',
          description: '负责电商平台核心系统开发',
          skills: 'Java, Spring Cloud, MySQL, Redis',
          salary: '40-60K·16薪',
          benefits: '七险一金, 股权激励, 住房补贴',
          responsibilities: '1. 系统架构设计\n2. 高并发场景优化\n3. 团队技术指导',
          publishTime: '2023-05-10',
          status: '已暂停'
        },
        {
          company: '字节跳动',
          hrName: '王HR',
          position: '产品经理',
          description: '负责短视频产品功能规划',
          skills: 'Axure, 数据分析, 用户研究',
          salary: '35-50K·15薪',
          benefits: '六险一金, 租房补贴, 弹性工作制',
          responsibilities: '1. 需求分析\n2. 产品原型设计\n3. 跨部门协调',
          publishTime: '2023-05-18',
          status: '热门'
        },
        {
          company: '华为技术',
          hrName: '赵总监',
          position: '云计算架构师',
          description: '负责云服务解决方案设计',
          skills: 'Kubernetes, Docker, 微服务',
          salary: '45-70K·16薪',
          benefits: '五险一金, 全球派遣机会, 子女教育补贴',
          responsibilities: '1. 技术方案设计\n2. 客户需求对接\n3. 团队管理',
          publishTime: '2023-05-05',
          status: '招聘中'
        }
      ]
    }
  }
}
</script>

<style>
/* 搜索容器样式 */
.search-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
}

.search-label {
  white-space: nowrap;
  font-size: 14px;
  color: #606266;
}

.search-input {
  width: 200px;
}

.search-button {
  margin-left: 10px;
}

/* 表格样式 */
.el-table {
  margin-top: 15px;
  font-size: 14px;
}

.el-table th {
  height: 60px;
  padding: 10px 0;
  background-color: #f5f7fa !important;
}

.el-table__body-wrapper {
  overflow-x: auto;
}

/* 分页左对齐样式 */
.pagination-left {
  margin-top: 10px;
  /* 距离表格10px */
  text-align: left;
  /* 左对齐 */
}

/* 状态标签样式 */
.el-table .el-tag {
  padding: 0 8px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 响应式调整 */
@media screen and (max-width: 1600px) {
  .el-table {
    font-size: 13px;
  }
}
</style>